import React from 'react'
import cn from 'classnames'
import s from './style.module.css'
import i from '../index.module.css'
// 今日访问请求svg
export function TodayView({title, num, className}) {
  return (
    <div className={cn(i.df, i.aic, className)}>
      <svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
          <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="系统监控" transform="translate(-519.000000, -222.000000)">
                  <g id="编组-16" transform="translate(520.000000, 223.000000)">
                      <g id="编组-7">
                          <circle id="椭圆形" stroke="#52A6FA" fill-opacity="0.1" fill="#52A6FA" cx="20" cy="20" r="20"></circle>
                          <g id="编组" transform="translate(8.000000, 12.000000)" fill="#000000" fill-rule="nonzero">
                              <path d="M23.9860372,7.2556516 C23.9860372,9.56948138 19.0442154,14.5013298 12.002992,14.5013298 C5.14128989,14.5013298 0.0199468085,9.65425532 0.0199468085,7.2556516 C0.0199468085,4.86203457 5.1612367,0.0199468085 12.002992,0.0199468085 C19.0990691,0.0249335106 23.9860372,4.86203457 23.9860372,7.2556516 Z M12.0179521,1.34640957 C8.83144947,1.34640957 6.24335106,3.99933511 6.24335106,7.265625 C6.24335106,10.5319149 8.83144947,13.1798537 12.0179521,13.1798537 C15.2044548,13.1798537 17.7925532,10.5269282 17.7925532,7.265625 C17.7925532,3.9943484 15.2044548,1.34640957 12.0179521,1.34640957 Z" id="形状"></path>
                              <path d="M12.002992,4.51795213 C10.3474069,4.51795213 9.00598404,5.859375 9.00598404,7.51496011 C9.00598404,9.16555851 10.3474069,10.5119681 12.002992,10.5119681 C13.6585771,10.5119681 15,9.17054521 15,7.51496011 C15,5.859375 13.6585771,4.51795213 12.002992,4.51795213 L12.002992,4.51795213 Z" id="路径"></path>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </svg>
      {title && num && (
        <div className={cn(i.pl24)}>
          <p className={s.cor}>{title}</p>
          <p className={cn(s.blackCor)}>{num}</p>
        </div>
      )}
    </div>
  )
}

// 今日web应用攻击
export function TodayWebAttack({title, num, className}) {
  return (
    <div className={cn(i.df, i.aic, className)}>
      <svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
          <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="系统监控" transform="translate(-780.000000, -222.000000)">
                  <g id="编组-15" transform="translate(781.000000, 223.000000)">
                      <g id="编组-14">
                          <g id="编组-7备份-2">
                              <circle id="椭圆形" stroke="#F0734F" fill-opacity="0.1" fill="#F0734F" cx="20" cy="20" r="20"></circle>
                              <g id="编组" transform="translate(8.000000, 8.000000)" fill="#000000" fill-rule="nonzero">
                                  <path d="M10.8147857,2.68285714 C10.9693942,2.4206829 11.2509905,2.25967763 11.5553571,2.25942857 L12.6216429,2.26285714 C12.9285716,2.26357047 13.2116923,2.42834283 13.3639286,2.69485714 L15.4005,6.26057143 L17.3582143,5.14285714 L14.6719286,0.440571429 C14.5199976,0.174586829 14.2376724,0.00989713384 13.9313571,0.00857142857 L10.2439286,-5.9515171e-07 C9.93895024,-0.000357901264 9.65656202,0.160727297 9.50164286,0.423428571 L6.63535714,5.31257143 L8.59821429,6.45942857 L10.8147857,2.68285714 Z M23.9856429,8.49771429 L21.5925,6.98057143 L21.4656429,4.14171429 L15.8016429,10.3062857 L23.9856429,8.49771429 Z M2.55021429,4.104 L2.42507143,6.96342857 L0.0147857143,8.48914286 L8.25364286,10.3251429 L2.55021429,4.104 Z M9.75021429,24 L11.9976429,22.8274286 L14.2570714,24 L11.9976429,16.8342857 L9.75021429,24 Z M20.9170714,11.4582857 L18.9473571,12.5948571 L21.1262143,16.392 C21.278012,16.6563282 21.278012,16.981386 21.1262143,17.2457143 L20.5947857,18.1697143 C20.4415465,18.4358399 20.157877,18.5998976 19.8507857,18.6 L15.7433571,18.6 L15.7433571,20.8542857 L21.1570714,20.8542857 C21.4636453,20.8539247 21.7466835,20.6898541 21.8993571,20.424 L23.7370714,17.2268571 C23.8895728,16.962717 23.8895728,16.637283 23.7370714,16.3731429 L20.9170714,11.4582857 L20.9170714,11.4582857 Z M3.3765,18.1851429 L2.59992857,16.8188571 L5.02392857,12.6325714 L3.05421429,11.496 L0.2325,16.392 C0.0800451254,16.6567649 0.0800451254,16.9826636 0.2325,17.2474286 L2.0685,20.4428571 C2.22173916,20.7089827 2.5054087,20.8730405 2.8125,20.8731429 L8.30164286,20.8731429 L8.30164286,18.6188571 L4.1205,18.6188571 C3.81240775,18.6191259 3.52807143,18.4533723 3.3765,18.1851429 Z" id="形状"></path>
                                  <path d="M9.79307143,9.80742857 C9.79307143,10.5870842 10.2090127,11.3075157 10.8842143,11.6973435 C11.5594158,12.0871713 12.3912985,12.0871713 13.0665,11.6973435 C13.7417016,11.3075157 14.1576429,10.5870842 14.1576429,9.80742857 C14.1576429,8.60218545 13.1806003,7.62514286 11.9753571,7.62514286 C10.770114,7.62514286 9.79307143,8.60218545 9.79307143,9.80742857 L9.79307143,9.80742857 Z" id="路径"></path>
                                  <path d="M7.65021429,16.2548571 L16.3982143,16.2548571 C16.3279286,13.8942857 14.4027857,11.9982857 12.0250714,11.9982857 C9.64735714,11.9982857 7.72221429,13.8942857 7.65021429,16.2548571 Z" id="路径"></path>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </svg>
      {title && num && (
        <div className={cn(i.pl24)}>
          <p className={s.cor}>{title}</p>
          <p className={s.blackCor}>{ num }</p>
        </div>
      )}
    </div>
    )
}

// 已接入业务系统
export function ArrivedSys({title, num, className}) {
  return (
    <div className={cn(i.df, i.aic, className)}>
      <svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
          <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="系统监控" transform="translate(-519.000000, -320.000000)" fill="#71CCB2">
                  <g id="编组-29" transform="translate(520.000000, 321.000000)">
                      <g id="编组-17">
                          <g id="编组-60">
                              <g id="编组-7备份-4" fill-opacity="0.1" stroke="#71CCB2">
                                  <circle id="椭圆形" cx="20" cy="20" r="20"></circle>
                              </g>
                              <g id="3.Icon/2.面性/2.业务安全类/大数据处理系统" transform="translate(8.000000, 9.000000)">
                                  <path d="M18.75,4.5 C19.9926407,4.5 21,5.50735931 21,6.75 C21,7.8794846 20.1677498,8.81458676 19.0830323,8.9755236 L18.1276513,13.2295038 C18.9534883,13.7639003 19.5,14.6931278 19.5,15.75 C19.5,17.4068542 18.1568542,18.75 16.5,18.75 C14.8431458,18.75 13.5,17.4068542 13.5,15.75 C13.5,15.112949 13.6985651,14.5222754 14.03718,14.0364944 L9.00972043,10.0930061 C8.59533649,10.3347932 8.1177558,10.4800916 7.60777982,10.4981 L6.26605608,15.2419395 C6.99820544,15.6131328 7.5,16.3729662 7.5,17.25 C7.5,18.4926407 6.49264069,19.5 5.25,19.5 C4.00735931,19.5 3,18.4926407 3,17.25 C3,16.175844 3.75271058,15.2774929 4.75944644,15.0536321 L6.14012913,10.1748072 C5.16671646,9.67893829 4.5,8.66732913 4.5,7.5 C4.5,5.84314575 5.84314575,4.5 7.5,4.5 C9.15685425,4.5 10.5,5.84314575 10.5,7.5 C10.5,8.05793312 10.3476934,8.58029311 10.0823892,9.02777087 L15.2025943,13.0442842 C15.5952395,12.8556665 16.0352799,12.75 16.5,12.75 C16.5660091,12.75 16.6315203,12.7521319 16.6964685,12.7563305 L17.6093559,8.68985611 C16.945466,8.29864295 16.5,7.57634356 16.5,6.75 C16.5,5.50735931 17.5073593,4.5 18.75,4.5 Z" id="形状" fill="#686C78"></path>
                                  <rect id="矩形-copy-59" fill="none" x="0" y="0" width="24" height="24"></rect>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </svg>
      {title && num && (
        <div className={cn(i.pl24)}>
          <p className={s.cor}>{title}</p>
          <p className={s.blackCor}>{ num }</p>
        </div>
      )}
    </div>
  )
} 

// 今日被攻击
export function TodayAttack({title, num, className}) {
  return (
    <div className={cn(i.df, i.aic, className)}>
      <svg width="42px" height="42px" viewBox="0 0 42 42" version="1.1" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink">
          <g id="页面设计" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
              <g id="系统监控" transform="translate(-780.000000, -320.000000)" fill="#FFB95D">
                  <g id="编组-57" transform="translate(781.000000, 321.000000)">
                      <g id="编组-56">
                          <g id="编组-12">
                              <g id="编组-11">
                                  <g id="编组-61">
                                      <g id="编组-7备份-3" fill-opacity="0.1" stroke="#FFB95D">
                                          <circle id="椭圆形" cx="20" cy="20" r="20"></circle>
                                      </g>
                                      <g id="3.Icon/1.线性/2.业务安全类/攻击" transform="translate(4.000000, 5.000000)">
                                          <path d="M11.1728055,8.5260571 C8.42774421,9.95537134 6.66666667,12.8037562 6.66666667,15.968707 C6.66666667,20.5967275 10.3996826,24.3448276 15,24.3448276 C19.6003174,24.3448276 23.3333333,20.5967275 23.3333333,15.968707 C23.3333333,12.8921656 21.5920823,10.0759885 18.8284485,8.52671016 L19.6026162,7.06093447 C22.8919592,8.77436165 25,12.184571 25,15.968707 C25,21.5068204 20.5249031,26 15,26 C9.47509695,26 5,21.5068204 5,15.968707 C5,12.2740749 7.01177743,8.93863598 10.3988905,7.06014979 L11.1728055,8.5260571 Z M12.7597719,12.6296999 C11.5681697,13.3810304 10.8333333,14.6763436 10.8333333,16.0963225 C10.8333333,18.3655032 12.6977861,20.2068966 15,20.2068966 C17.3022139,20.2068966 19.1666667,18.3655032 19.1666667,16.0963225 C19.1666667,14.7442517 18.4556062,13.4796681 17.2409624,12.630163 L18.1345815,11.233017 C19.8017187,12.2846664 20.8333333,14.1035652 20.8333333,16.0963225 C20.8333333,19.2816829 18.2206336,21.862069 15,21.862069 C11.7793664,21.862069 9.16666667,19.2816829 9.16666667,16.0963225 C9.16666667,14.1769588 10.1005316,12.4396478 11.8664459,11.232369 L12.7597719,12.6296999 Z M17.0833333,2 L17.0833333,6.96551724 L15.8333333,7.95862069 L15.8342313,14.6357419 C16.2981302,14.9026256 16.6865489,15.3326923 16.6568884,16.1504796 C16.6272279,16.968267 15.9204746,17.7241379 15,17.7241379 C14.0795254,17.7241379 13.3333333,16.983092 13.3333333,16.0689655 C13.3333333,15.4563428 13.6684718,14.921456 14.1666063,14.6352604 L14.1666667,7.95862069 L12.9166667,6.96551724 L12.9166667,2 L15,3.65517241 L17.0833333,2 Z" id="形状" fill="#686C78" transform="translate(15.000000, 14.000000) rotate(-45.000000) translate(-15.000000, -14.000000) "></path>
                                          <rect id="矩形-copy-67" fill="none" transform="translate(16.000000, 16.000000) scale(-1, -1) rotate(-90.000000) translate(-16.000000, -16.000000) " x="0" y="0" width="32" height="32"></rect>
                                      </g>
                                  </g>
                              </g>
                          </g>
                      </g>
                  </g>
              </g>
          </g>
      </svg>
      {title && num && (
        <div className={cn(i.pl24)}>
          <p className={s.cor}>{title}</p>
          <p className={s.blackCor}>{ num }</p>
        </div>
      )}
    </div>
  )
}

